<template>
  <a-form class="form" :model="formData">
    <template v-for="(module, index) in formData" :key="index">
      <a-form-item class="itemTitle">
        <div class="title">{{ numberToChinese(index + 1) + '、' + module.name }}</div>
      </a-form-item>
      <template v-for="(subitem, i) in module.list" :key="i">
        <a-form-item class="subitemName">
          <span
            >{{ i + 1 + '. ' + subitem.name
            }}<span>{{
              subitem.type.includes('单选')
                ? '（单选）'
                : subitem.type.includes('多选')
                  ? '（多选）'
                  : ''
            }}</span></span
          >
        </a-form-item>
        <template v-if="subitem.type.includes('单选')">
          <a-form-item class="subitemName">
            <a-row :gutter="[48, 8]">
              <template v-for="(option, s) in subitem.options" :key="s">
                <a-col>
                  <a-space>
                    <a-radio
                      :checked="subitem.value === option.value"
                      @change="() => (subitem.value = option.value)"
                      :disabled="disabled"
                      >{{ option.value }}</a-radio
                    >
                    <a-input
                      v-if="option.input"
                      style="width: 210px"
                      v-model:value="subitem.inputText"
                      @input="
                        () => {
                          subitem.value = option.value
                        }
                      "
                      :disabled="disabled"
                      autocomplete="off"
                      :maxlength="option.maxlength"
                      placeholder=""
                    ></a-input>
                  </a-space>
                </a-col>
              </template>
            </a-row>
          </a-form-item>
        </template>
        <template v-else-if="subitem.type.includes('多选')">
          <a-form-item class="subitemNameCheckbox">
            <a-row :gutter="[48, 8]">
              <template v-for="(option, s) in subitem.options" :key="s">
                <a-col>
                  <a-space>
                    <a-checkbox
                      :checked="subitem.value.includes(option.value)"
                      @change="multipleChange($event, option.value, subitem)"
                      :disabled="disabled"
                      >{{ option.value }}</a-checkbox
                    >
                    <a-input
                      v-if="option.input"
                      style="width: 210px"
                      v-model:value="subitem.inputText"
                      @input="
                        () => {
                          subitem.value = Array.from(new Set(subitem.value).add(option.value))
                        }
                      "
                      :disabled="disabled"
                      autocomplete="off"
                      :maxlength="option.maxlength"
                      placeholder=""
                    ></a-input>
                  </a-space>
                </a-col>
              </template>
            </a-row>
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item class="subitemNameCheckbox">
            <a-textarea
              style="padding: 9px 16px"
              v-model:value="subitem.value"
              :disabled="disabled"
              placeholder="请输入你的回答"
              :maxlength="500"
              :rows="2"
            />
          </a-form-item>
        </template>
      </template>
    </template>
  </a-form>
</template>

<script setup lang="ts">
import { numberToChinese } from '@/utils/tools'

const multipleChange = (e, val, item) => {
  console.log(e.target.checked)
  if (e.target.checked) {
    if (item.value.includes(val)) {
      return
    } else {
      item.value.push(val)
    }
  } else {
    const i = item.value.findIndex((v) => {
      return v === val
    })
    if (i > -1) {
      item.value.splice(i, 1)
    } else {
      return
    }
  }
}

const props = defineProps(['formData', 'disabled'])
const emit = defineEmits(['update:formData', 'reset'])
</script>

<style lang="less" scope>
.ant-form-item {
  &.itemTitle {
    background: #f7f8fa;
    margin-bottom: 5px;
    .title {
      height: 32px;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 600;
      color: #1d2129;
      padding-left: 16px;
      line-height: 32px;
    }
  }
  &.subitemName {
    margin-bottom: 0px;
  }
  &.subitemNameCheckbox {
    margin-bottom: 0px;
  }
}
.red {
  color: #ff1313;
}
</style>
